<template>
  <div class="main-content">
    <step-captcha1 v-if="currentTab === 0" @nextStep="nextStep" @commitPhone="commitPhone" />
    <step-phone2 v-if="currentTab === 1" :phoneNumber="phoneNumber" @nextStep="nextStep" />
    <step-reset3 v-if="currentTab === 2" @nextStep="nextStep" />
    <step-success v-if="currentTab === 3" />
  </div>
</template>

<script>
import StepCaptcha1 from '@/components/ForgetPassword/StepCaptcha1'
import StepPhone2 from '@/components/ForgetPassword/StepPhone2'
import StepReset3 from '@/components/ForgetPassword/StepReset3'
import StepSuccess from '@/components/ForgetPassword/StepSuccess'
export default {
  components: {
    StepCaptcha1,
    StepPhone2,
    StepReset3,
    StepSuccess
  },
  data() {
    return {
      currentTab: 0,
      phoneNumber: null
    }
  },
  methods: {
    // handler,传到子组件，子组件emit返回
    nextStep() {
      if (this.currentTab < 3) {
        this.currentTab += 1
      }
    },
    // 第一步的电话号码记下来给第二步
    commitPhone(value) {
      this.phoneNumber = value
    }
  }
}
</script>

<style lang="less" scoped>
.main-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
